<template>
  <div class="header-content">
    <div class="header-box">
      <div class="header-left">
        <div class="system-info">xxx仿真控制系统</div>
      </div>
      <div class="header-right">
        <div class="time-box local-color">
          <div class="time-info">
            <b>北京时间</b>
            <span class="time-date local-color">{{ localTime.date }}</span>
          </div>
          <pre class="time-datetime" v-html="localTime.datetime"></pre>
        </div>
        <div class="time-box sim-color">
          <div class="time-info">
            <b>作战时间</b>
            <span class="time-date">{{ simulationTime.date }}</span>
          </div>
          <pre class="time-datetime" v-html="simulationTime.datetime"></pre>
        </div>
        <div class="logout">
          <i class="iconfont icon-tuichu1"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../../assets/img/font_3156122_k8lw8sas92b/iconfont.css";
import XEUtils from "xe-utils";
export default {
  name: "HeaderComponent",
  data() {
    return {
      localTime: {
        date: "",
        datetime: "",
      },
      simulationTime: {
        date: "",
        datetime: "",
      },
      timerLocal: null,
      timerSimu: null,
    };
  },

  computed: {
    mqClient() {
      return this.$store.state.mqClient;
    },
  },
  mounted() {
    let time = new Date();
    this.localTime.date = XEUtils.toDateString(time, "yyyy-MM-dd");
    this.localTime.datetime = XEUtils.toDateString(time, `HH : mm : ss`);
    this.timerSimu = setInterval(() => {
      let currentTime = new Date();
      this.simulationTime.date = XEUtils.toDateString(
        currentTime,
        "yyyy-MM-dd"
      );
      this.simulationTime.datetime = XEUtils.toDateString(
        currentTime,
        `HH : mm : ss`
      );
    }, 1000);

    this.timerSimu = setInterval(() => {
      let currentTime = new Date();
      this.localTime.date = XEUtils.toDateString(currentTime, "yyyy-MM-dd");
      this.localTime.datetime = XEUtils.toDateString(
        currentTime,
        `HH : mm : ss`
      );
    }, 1000);
  },
  beforeDestroy() {
    this.timerLocal = null;
    this.timerSimu = null;
  },
};
</script>

<style scoped>
.header-content {
  height: 60px;
  width: 100%;
  background-color: #101a34;
}
.header-box {
  display: flex;
  justify-content: space-between;
  height: 60px;
}
.local-color {
  color: #01e8f9 !important;
}
.sim-color {
  color: #00ff5d !important;
}
.system-info {
  color: aliceblue;
  padding-left: 20px;
  font-size: 28px;
  font-weight: 800;
  line-height: 60px;
}
.header-right {
  display: flex;
  justify-content: space-between;
  color: aliceblue;
}
.time-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.time-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  margin: auto 15px;
}
@font-face {
  font-family: LED;
  src: url("../../assets/img/电子表字体.ttf");
}
.time-date {
  font-family: LED;
  /* color: aliceblue; */
  font-size: 16px;
}
.time-datetime {
  font-size: 36px;
  font-family: LED;
  word-spacing: 8px;
  margin-right: 10px;
  width: 145px;
}
.logout {
  width: 60px;
  height: 60px;
  margin-left: 10px;
}
.icon-tuichu1 {
  font-size: 30px;
  color: #03c7d9;
  line-height: 60px;
}
</style>
